import { motion } from 'framer-motion';
import { useLanguage } from '@/contexts/LanguageContext';

// Feature data with icon classes
const features = [
  { id: 1, icon: "fa-truck", titleKey: "freeShipping", descKey: "freeShippingDesc" },
  { id: 2, icon: "fa-shield", titleKey: "securePayment", descKey: "securePaymentDesc" },
  { id: 3, icon: "fa-wrench", titleKey: "customerSupport", descKey: "customerSupportDesc" },
  { id: 4, icon: "fa-refresh", titleKey: "easyReturns", descKey: "easyReturnsDesc" },
];

export default function FeatureSection() {
  const { t } = useLanguage();
  
  return (
    <section className="py-16 bg-white">
      <div className="container mx-auto px-4">
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
          {features.map((feature, index) => (
            <motion.div
              key={feature.id}
              className="text-center p-6 rounded-xl hover:shadow-lg transition-shadow duration-300"
              initial={{ opacity: 0, y: 20 }}
              whileInView={{ opacity: 1, y: 0 }}
              transition={{ duration: 0.5, delay: index * 0.1 }}
              viewport={{ once: true }}
            >
              <div className="w-14 h-14 bg-blue-100 rounded-full flex items-center justify-center mx-auto mb-4 text-blue-600 text-2xl">
                <i className={`fa-solid ${feature.icon}`}></i>
              </div>
              <h3 className="text-xl font-semibold text-gray-800 mb-2">{t(feature.titleKey)}</h3>
              <p className="text-gray-600">{t(feature.descKey)}</p>
            </motion.div>
          ))}
        </div>
      </div>
    </section>
  );
}